<template>
    <v-row justify="center" align="center">
        <v-col cols="12" xl="4" lg="6" md="12">
            <v-card class="mb-5">
                <v-card-title>Input</v-card-title>
                <v-card-text>
                    <div class="text-center">
                        <v-switch v-model="useCurrentDate" label="Use current date"/>
                    </div>
                    <v-divider></v-divider>
                    <br>

                    <v-row>
                        <v-col md="4" sm="12" class="pt-0 pb-0">
                            <v-select
                                    :items="formats.filter(f => !f.title.toLowerCase().includes('locale')).map(v => v.title)"
                                    outlined
                                    label="Your date format"
                                    placeholder="Input format"
                                    v-model="inputFormatterTitle"
                                    @input="userInputChanged()"
                                    :disabled="useCurrentDate"
                            />
                        </v-col>
                        <v-col md="8" sm="12" class="pt-0 pb-0">
                            <v-text-field
                                    outlined
                                    v-model="inputString"
                                    label="Your date string"
                                    @input="userInputChanged()"
                                    :error="invalidInput"
                                    :disabled="useCurrentDate"
                            />
                        </v-col>
                    </v-row>
                </v-card-text>
            </v-card>
        </v-col>
        <v-col cols="12" xl="4" lg="6" md="12">
            <v-card>
                <v-card-title>Dates formats</v-card-title>
                <v-card-text>

                    <v-text-field
                            dense
                            readonly
                            outlined
                            v-for="format of formats"
                            v-bind:key="format.title"
                            :label="format.title"
                            :value="format.getDate()"
                            append-icon="fa-clipboard"
                            @click:append="copyDate(format.getDate())"
                    />

                </v-card-text>
            </v-card>
        </v-col>
    </v-row>
</template>

<script>
    import {copyToClipboard} from "../../utils/helpers";

    export default {
        name: "DateConverter",
        created() {
            setInterval(this.refreshCurrentDate.bind(this), 1000);
            this.inputFormatterTitle = this.formats[1].title;
        },
        data() {
            const vm = this;

            return {
                inputString: '',
                inputFormatterTitle: undefined,
                useCurrentDate: true,
                displayedDate: new Date(),
                invalidInput: false,
                formats: [
                    {
                        title: 'Locale datetime',
                        getDate() {
                            return vm.displayedDate.toLocaleString();
                        },
                        dateFromFormat(dateString) {
                            return dateString
                        }
                    },
                    {
                        title: 'ISO 8601',
                        getDate() {
                            return vm.displayedDate.toISOString();
                        },
                        dateFromFormat(dateString) {
                            return new Date(dateString)
                        }
                    },
                    {
                        title: 'UTC format',
                        getDate() {
                            return vm.displayedDate.toUTCString();
                        },
                        dateFromFormat(dateString) {
                            return new Date(dateString)
                        }
                    },
                    {
                        title: 'UNIX Timestamp (ms)',
                        getDate() {
                            return vm.displayedDate.getTime();
                        },
                        dateFromFormat(dateString) {
                            return new Date(parseInt(dateString))
                        }
                    },
                    {
                        title: 'Complete',
                        getDate() {
                            return vm.displayedDate.toString();
                        },
                        dateFromFormat(dateString) {
                            return new Date(dateString)
                        }
                    }
                ],
                refreshCurrentDate() {
                    if (this.useCurrentDate) {
                        this.displayedDate = new Date();
                    }
                },
                copyDate(date) {
                    copyToClipboard(date);
                    this.$toast.success('Copied to clipboard.')
                },
                userInputChanged() {
                    try {
                        this.invalidInput = false;
                        const newDate = this.formats.find(f => f.title === this.inputFormatterTitle)?.dateFromFormat(this.inputString);

                        if (newDate && !isNaN(newDate.getTime())) {
                            this.useCurrentDate = false;
                            this.displayedDate = newDate;
                        } else if (this.inputString.length > 0) {
                            this.invalidInput = true;
                        }
                    } catch (ignored) {
                        //
                    }
                }
            }
        }
    }
</script>

<style scoped lang="less">
</style>